<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<html>

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>HappyHome Admin</title>

    <!-- Bootstrap Core CSS -->
    <link href="<c:url value="/resources/admin/css/bootstrap.min.css"/>" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="<c:url value="/resources/admin/css/sb-admin.css"/>" rel="stylesheet">

    <!-- Morris Charts CSS -->
    <link href="<c:url value="/resources/admin/css/plugins/morris.css"/>" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="<c:url value="/resources/admin/font-awesome-4.1.0/css/font-awesome.min.css"/>" rel="stylesheet" type="text/css">
    <!-- datepicker plugin, css -->
    <link href="<c:url value="/resources/datepicker/bootstrap.css"/>" rel="stylesheet">
    <link href="<c:url value="/resources/datepicker/datepicker.css"/>" rel="stylesheet">
    <!-- /datepicker plugin, css -->
	<!-- ckeditor plugin -->
    <script src="<c:url value="/resources/ckeditor/ckeditor.js"/>" type="text/javascript"></script>
    <!-- end ckeditor -->
</head>

<body>
	<c:url value="/j_spring_security_logout" var="logoutUrl" />
	<form action="${logoutUrl}" method="post" id="logoutForm" style="display:none;">
		<input type="hidden" name="${_csrf.parameterName}"
			value="${_csrf.token}" />
	</form>
    <script>
		function formSubmit() {
			document.getElementById("logoutForm").submit();
		}
	</script>
	
    <div id="wrapper">

        <!-- Navigation -->
		<%@ include file="/WEB-INF/pages/admin/navigation.jsp" %>
		
        <div id="page-wrapper">

            <div class="container-fluid">

                <!-- Page Heading -->
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="page-header">
                            NEW ROOM
                        </h1>
                        <ol class="breadcrumb">
                            <li class="active">
                                <i class="fa fa-dashboard"></i> Dashboard
                            </li>
                        </ol>
                    </div>
                </div>
                <!-- /.row -->

                <div class="row">
                    <div class="col-lg-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title"><i class="fa fa-money fa-fw"></i> NEW ROOM</h3>
                            </div><!-- panel-heading -->
                            <div class="panel-body">
                            	<div class="row">
                            		<form role="form">
					                    <div class="col-lg-6">
					                    		<div class="form-group">
					                                <label>House</label>
					                                <select class="form-control">
					                                    <option>Ba Le Chan</option>
					                                    <option>Ho Hao Hon</option>
					                                    <option>Nhat Chi Mai</option>
					                                    <option>Nguyen Trai</option>
					                                </select>
					                            </div>
					                            
					                            <div class="form-group">
					                                <label>Room</label>
					                                <select class="form-control">
					                                    <option>P101</option>
					                                    <option>P102</option>
					                                    <option>P103</option>
					                                    <option>P104</option>
					                                </select>
					                            </div>
					
					                            <div class="form-group">
					                                <label>Customer</label>
					                                <select class="form-control">
					                                    <option>Nguyen Van A</option>
					                                    <option>Nguyen Van B</option>
					                                    <option>Nguyen Van C</option>
					                                    <option>Nguyen Van D</option>
					                                </select>
					                            </div>
					
					                            <div class="form-group">
					                                <label>Check-in Date</label>
					                                <div class="input-append date" id="dpd1" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
														<input class="span2" size="16" type="text" value="12-02-2012" name="check-in-date" readonly>
														<span class="add-on"><i class="glyphicon glyphicon-calendar"></i></span>
												  	</div>
					                            </div>
									
												<div class="form-group">
					                                <label>Check-out Date</label>
					                                <div class="input-append date" id="dpd2" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
														<input class="span2" size="16" type="text" name="check-out-date" readonly>
														<span class="add-on"><i class="glyphicon glyphicon-calendar"></i></span>
												  	</div>
					                            </div>
					                            
					                            <div class="form-group">
					                                <label>Rental Room</label>
					                                <input class="form-control" placeholder="Please, Enter value!">
					                            </div>
									
												<div class="form-group">
					                                <label>Deposit Room</label>
					                                <input class="form-control" placeholder="Please, Enter value!">
					                            </div>
					                    </div><!-- /col-lg-6 -->
					                    <div class="col-lg-6">
					                            <div class="form-group">
					                                <label>Number's Electric</label>
					                                <input type="text" class="form-control" placeholder="Please, Enter value!">
					                            </div>
					
					                            <div class="form-group">
					                            	<label>Water's Number</label>	
					                                <label class="radio-inline">
					                                    <input type="radio" name="optionsRadiosInline" id="optionsRadiosInline1" value="option1" checked>person
					                                </label>
					                                <label class="radio-inline">
					                                    <input type="radio" name="optionsRadiosInline" id="optionsRadiosInline2" value="option2">number
					                                </label>
					                                <input type="text" class="form-control" placeholder="Please, Enter value!">
					                            </div>
					
					                            <div class="form-group">
					                            	<label>Months</label>
					                                <input type="text" class="form-control" placeholder="Font Awesome Icon">
					                            </div>
					
					                            <div class="form-group">
				                                    <label for="disabledSelect">Max person</label>
				                                    <select id="disabledSelect" class="form-control">
				                                        <option>2</option>
				                                    </select>
				                                </div>
				                                
				                                <div class="form-group">
					                                <label>Person</label>
					                                <select class="form-control">
					                                    <option>1</option>
					                                    <option>2</option>
					                                    <option>3</option>
					                                    <option>4</option>
					                                </select>
					                            </div>
					                      </div>	<!-- /col-lg-6 -->
                        				<div class="col-lg-12">
	                        				<div class="panel panel-default">
					                            <div class="panel-heading">
					                                <h3 class="panel-title"><i class="fa fa-money fa-fw"></i> Utilities</h3>
					                            </div><!-- panel-heading -->
					                            <div class="panel-body">
					                            	<div class="col-lg-4">
						                            	<div class="form-group">
							                                <div class="checkbox">
							                                    <label>
							                                        <input type="checkbox" value="">Wifi
							                                    </label>
							                                </div>
							                                <div class="checkbox">
							                                    <label>
							                                        <input type="checkbox" value="">Frigator
							                                    </label>
							                                </div>
							                                <div class="checkbox">
							                                    <label>
							                                        <input type="checkbox" value="">Evalator
							                                    </label>
							                                </div>
							                            </div><!-- form-group -->
						                           	</div><!-- col-lg-4 -->
						                           	<div class="col-lg-4">
						                            	<div class="form-group">
							                                <div class="checkbox">
							                                    <label>
							                                        <input type="checkbox" value="">Wifi
							                                    </label>
							                                </div>
							                                <div class="checkbox">
							                                    <label>
							                                        <input type="checkbox" value="">Frigator
							                                    </label>
							                                </div>
							                                <div class="checkbox">
							                                    <label>
							                                        <input type="checkbox" value="">Evalator
							                                    </label>
							                                </div>
							                            </div><!-- form-group -->
						                           	</div><!-- col-lg-4 -->
						                           	<div class="col-lg-4">
						                            	<div class="form-group">
							                                <div class="checkbox">
							                                    <label>
							                                        <input type="checkbox" value="">Wifi
							                                    </label>
							                                </div>
							                                <div class="checkbox">
							                                    <label>
							                                        <input type="checkbox" value="">Frigator
							                                    </label>
							                                </div>
							                                <div class="checkbox">
							                                    <label>
							                                        <input type="checkbox" value="">Evalator
							                                    </label>
							                                </div>
							                            </div><!-- form-group -->
						                           	</div><!-- col-lg-4 -->
					                            </div><!-- /panel-body -->
								            </div>  <!-- panel panel-default -->
							           	</div>   <!-- /col-lg-12 -->  
							           	<div class="col-lg-12">
							           		<div class="panel panel-default">
							           			<div class="panel-heading">
							           				<h3 class="panel-title">Description</h3>
							           			</div>
							           			<div class="panel-body">
							           				<textarea name="description" id="description" class="col-lg-12">
										            </textarea>
										            <script>
										                CKEDITOR.replace( 'description' );
										            </script>
							           			</div>
							           		</div>
							           	</div>
							           	<div class="col-lg-12">         
	                        				<button type="submit" class="btn btn-default">Submit Button</button>
				                            <button type="reset" class="btn btn-default">Reset Button</button>
				                        </div><!-- /col-lg-12 --> 
                        			</form>
                    			</div><!-- /row -->
                			</div><!-- /panel-body -->
                         </div><!-- panel panel-default -->
                     </div><!-- col-lg-12 -->
                </div><!-- /row -->
            </div>
            <!-- /.container-fluid -->

        </div>
        <!-- /#page-wrapper -->

    </div>
    <!-- /#wrapper -->

    <!-- jQuery Version 1.11.0 -->
    <script src="<c:url value="/resources/admin/js/jquery-1.11.0.js"/>"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="<c:url value="/resources/admin/js/bootstrap.min.js"/>"></script>

    <!-- datepicker plugin -->
    <script src="<c:url value="/resources/datepicker/bootstrap-datepicker.js"/>"></script>
	<script> 
		/* set check-out date >= check-in date */
		$('#dpd1').datepicker('setValue', new Date());
		
		var nowTemp = new Date();
		var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
		 
		var checkin = $('#dpd1').datepicker({
		  onRender: function(date) {
		    return date.valueOf() < now.valueOf() ? 'disabled' : '';
		  }
		}).on('changeDate', function(ev) {
		  if (ev.date.valueOf() > checkout.date.valueOf()) {
		    var newDate = new Date(ev.date)
		    newDate.setDate(newDate.getDate() + 1);
		    checkout.setValue(newDate);
		  }
		  checkin.hide();
		  $('#dpd2')[0].focus();
		}).data('datepicker');
		var checkout = $('#dpd2').datepicker({
		  onRender: function(date) {
		    return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
		  }
		}).on('changeDate', function(ev) {
		  checkout.hide();
		}).data('datepicker');
	</script>
	<!-- /datepicker plugin-->
</body>

</html>
